<template>
  <DetailsFormBox :title="dataInfo?.table?.title" :type="route.query.type" :form="data.form" :btns="[
    // {
    //   title: '重置',
    //   icon: '',
    //   type: '',
    //   click: getForm,
    // },
    // {
    //   title: '保存',
    //   icon: '',
    //   type: 'primary',
    //   click: (form: any) => {
    //     saveBtn(form)
    //   },
    // },
  ]" :loading="data.loading" :json="dataInfo">
    <template #default="{ form }">
      <div class="customerBox m-8">
        <div class="header list-b-4 p-12">
          <h1>{{ form.customerName }}</h1>
          <div class="tags list-r-4">
            <el-tag type="primary" effect="dark" v-for="item in data.tags">
              <span>{{ item.tagContent }}</span>
              <el-icon v-if="isEdit" @click="() => {
                proxy.$api.OrderBusniess.DeleteCustomerTag({
                  tagID: item.tagID,
                })
                  .then((res: any) => {
                    proxy.$message('删除成功')
                    getTags()
                  })
              }">
                <Close />
              </el-icon>
            </el-tag>
            <div class="add" v-if="isEdit" @click="() => {
              proxy.$messageInputBox(`新增客户标签`, (value: string) => {
                proxy.$api.OrderBusniess.AddCustomerTag({
                  customerCode: form.customerCode,
                  tagContent: value,
                })
                  .then((res: any) => {
                    proxy.$message('新建成功');
                    getTags()
                  })
                  .catch(() => { });
              });
            }">
              <el-icon>
                <Plus />
              </el-icon>
              <span>添加标签</span>
            </div>
          </div>
        </div>
        <ElTabsBox active="" :data="[
          {
            label: '基本信息',
            value: 'basicInformation',
            template: 'BasicInformation',
          },
          {
            label: '收货地址',
            value: 'customerAddress',
            template: 'CustomerAddress',
          },
          {
            label: '客户订单',
            value: 'customerOrder',
            template: 'CustomerOrder',
          },
          {
            label: '客户资质',
            value: 'customerQualification',
            template: 'CustomerQualification',
          },
          {
            label: '客户资料',
            value: 'customerInformation',
            template: 'CustomerInformation',
          },
          {
            label: '客户合同',
            value: 'customerContract',
            template: 'CustomerContract',
          },
        ]" :query="{
          data: form,//主表信息
          customerCode: form.customerCode,//客户编号
          imageViewer: imageViewer,//预览图信息
          isEdit: isEdit,//是否编辑
          options: options,//是否编辑
        }" :templateObj="{
          BasicInformation,
          CustomerAddress,
          CustomerQualification,
          CustomerInformation,
          CustomerContract,
          CustomerOrder,
        }" v-if="form.customerCode" @saveBtn="getForm" />
      </div>
    </template>
  </DetailsFormBox>
  <el-image-viewer v-if="imageViewer.show" @close="() => {
    imageViewer.show = false
  }" :url-list="imageViewer.list" />
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
import CustomerContract from './CustomerContract.vue'; // 合同
import CustomerInformation from './CustomerInformation.vue'; // 资料
import BasicInformation from './BasicInformation.vue'; // 资质
import CustomerQualification from './CustomerQualification.vue'; // 客户资质
import CustomerAddress from './CustomerAddress.vue'; // 收货地址
import CustomerOrder from './CustomerOrder.vue'; // 客户订单
import { useListComponent } from '../pageTs'; // 引入逻辑
const { dataInfo, imageViewer, options } = useListComponent();
import { reactive, onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data: any = reactive({
  loading: false,
  loadingMsg: '',
  form: {
    customerID: 0, // 客户主键ID
    customerCode: "", // 客户编码（唯一识别码）
    customerNumber: "", // 客户编号
    customerType: 0, // 客户类型：1企业；2个体
    customerName: "", // 客户名字
    telephoneNo: "", // 客户电话号码
    province: "", // 所在省代码
    city: "", // 所在市代码
    country: "", // 所在县代码
    customerAddress: "", // 客户地址
    displayCustomerAddress: "", // 客户地址（展示地址）
    customerRemark: "", // 客户备注
    settlementWay: 0, // 结算方式：1现结；2月结
    settlementWayName: "", // 结算方式（展示字段）
    belongToSalesman: "", // 销售代表代码
    belongToSalesmanName: "", // 销售代表名字（展示字段）
    taxRate: 0.0, // 税率
    courierFeeType: 0, // 快递费用归属，0-客户承担；1-公司承担；2-各自一半，默认0
    isIncludingTax: 0, // 是否含税,0-未税；1-含税，默认0
    contactPerson: "", // 联系人姓名
    contactManSex: 0, // 联系人性别：1男；2女
    contactManSexName: "", // 联系人性别（展示字段）
    contactBirthday: "", // 联系人出生日期，格式：yyyy-MM-dd
    contactPicture: "", // 联系人照片
    contactMobile: "", // 联系电话
    contactQQ: "", // 联系人QQ号码
    contactWx: "", // 联系人微信号
    contactEmail: "", // 联系人Email地址
    contactAddress: "", // 联系人地址
    invoiceType: 0, // 开票类型：1普通发票；2增值税专票
    invoiceTypeName: "", // 开票类型（展示字段）
    invoiceTitle: "", // 开票抬头（单位名称）
    taxpayerIdentifyCode: "", // 纳税人识别码
    makeInvoiceAddress: "", // 开票地址（单位地址）
    makeInvoiceTelephone: "", // 开票电话
    openAccountBank: "", // 开户银行
    bankCardNo: "", // 银行卡号
  },
  tags: [],//客户标签
});
import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();
const isEdit = computed(() => {
  let _query: any = route.query
  return _query.type === '2' && proxy.$permission('MenuCode1-4-1')
})
const getForm = (isSave: boolean = false) => {
  let _query: any = route.query
  data.loading = true;
  proxy.$api.OrderBusniess.QueryCustomerDetail({
    customerID: _query.customerID
  })
    .then((res: any) => {
      data.form = res
      data.loading = false;
      if (!isSave) {
        getTags()
      }
    })
    .catch(() => {
      data.loading = false;
    });
};
//客户标签
const getTags = () => {
  proxy.$api.OrderBusniess.QueryCustomersTags({
    customerCode: data.form.customerCode
  })
    .then((res: any) => {
      data.tags = res
    })
};
import { getPersonnel, getTreeAreaDataList } from '@/utils/optionsArr.ts';
onMounted(() => {
  getForm();
  getPersonnel(options, 'personnel') //获取所有员工
  getTreeAreaDataList(options, 'treeArea')
});
</script>
